@mixin activeComm() {
  @apply relative text-theme;
  border-color: var(--theme-color);

  .activeImg {
    @apply block;
  }
}

.main {
  @apply w-full mt-10 overflow-x-hidden;

  .titleBox {
    @apply flex items-center justify-between;
    margin-bottom: 1.875rem;
    width: calc(100% - 1rem);
    height: 1.875rem;

    & > h2 {
      @apply font-normal text-2xl text-white-80;
      line-height: 1.875rem;
    }

    .switch {
      @apply text-lg text-white font-normal flex items-center;
      font-family: OPPOSans;
      line-height: 1.625rem;

      & > span {
        @apply mx-3;
      }

      & > img {
        @apply cursor-pointer w-5 h-5;
      }

      .switchPrev {
        transform: rotate(-180deg);
      }

      .switchNot {
        @apply opacity-40 cursor-default;
      }
    }
  }

  .items {
    @apply w-full flex flex-nowrap overflow-hidden;
    margin-bottom: 1.9375rem;
    height: 9.375rem;

    .itemContainer {
      @apply cursor-pointer border border-2;
      border-color: transparent;
      width: 8.75rem;
      height: 8.75rem;
      border-radius: 50%;

      &:not(:first-child) {
        margin-left: 4.25rem;
      }

      .actorBox {
        @apply w-full h-full overflow-hidden relative flex items-center justify-center;
        border-radius: 50%;

        .actorImg {
          & > img {
            @apply w-full h-full;
            border-radius: 50%;
          }

          width: 8.125rem;
          height: 8.125rem;
          border-radius: 50%;
        }

        .actorName {
          @apply absolute left-2/4 h-10 leading-10 text-sm text-white-60 text-center bottom-0;
          transform: translateX(-50%);
          padding: 0 1.25rem;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 97%);
          width: 7.0625rem;
        }
      }

      .activeImg {
        @apply h-3 my-0 mx-auto hidden;
        width: 1.375rem;
      }

      &.itemActive {
        @include activeComm();
      }

      &:hover {
        @include activeComm();
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .main {
    width: calc(100vw - 1rem);
    margin: 0.625rem auto 0;
    margin-left: 1rem;
    .titleBoxPhone {
      & > h2 {
        @apply font-normal text-xl text-white-80;
        line-height: 1.875rem;
      }

      .switch {
        @apply hidden;
      }
    }

    .itemsPhone {
      @apply flex flex-nowrap overflow-x-auto overflow-y-hidden;
      margin-bottom: 0.625rem;
      padding: 0 !important;

      .actorBox {
        @apply shrink-0 mr-4;
        width: 5rem;

        &.itemActive {
          .actorImg {
            border: 2px solid var(--theme-color);

            &::after {
              @apply absolute left-2/4 w-0 h-0;
              content: '';
              bottom: -0.5rem;
              transform: translateX(-50%);
              border-left: 0.5rem solid transparent;
              border-right: 0.625rem solid transparent;
              border-top: 0.5rem solid #ff8032;
            }
          }

          .actorName {
            @apply text-theme;
          }
        }

        .actorImg {
          @apply w-full h-20 relative;
          border-radius: 50%;

          & > img {
            @apply w-full h-full;
            border-radius: 50%;
          }
        }

        .actorName {
          @apply w-full overflow-hidden text-sm text-white-80 text-center;
          margin-top: 0.625rem;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
